<script setup>
import useCategoryStore from '@/store/modules/category'

const categoryStore = useCategoryStore()

// 获取一级分类
const getC1 = () => {
  categoryStore.getC1()
}

getC1()

// 一级分类下拉菜单改变触发的函数(选中值的时候触发，保证一级分类ID存在)
const handler = () => {
  // 一级分类改变时，清空二级分类和三级分类
  categoryStore.clearInfoForC1()
  categoryStore.getC2()
}

// 二级分类下拉菜单改变触发的函数(选中值时触发，保证二级分类ID存在)
const handler1 = () => {
  categoryStore.clearInfoForC2()
  categoryStore.getC3()
}

// 接收传参
defineProps(['disableFlag'])
</script>

<template>
  <el-card>
    <el-form :inline="true" :disabled="disableFlag !== 0">
      <el-form-item label="一级分类">
        <el-select
          style="width: 250px"
          v-model="categoryStore.c1Id"
          @change="handler"
          
        >
          <!-- option:label即为显示文字  value即为select下拉菜单收集的数据 -->
          <!-- <el-option v-for="item in c1Arr" :label="item.name" :key="item.id" :value="item.id"></el-option> -->
          <el-option
            v-for="item in categoryStore.c1Arr"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类">
        <el-select
          style="width: 250px"
          v-model="categoryStore.c2Id"
          @change="handler1"
        >
          <el-option
            v-for="item in categoryStore.c2Arr"
            :key="item.id"
            :value="item.id"
            :label="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="三级分类">
        <el-select style="width: 250px" v-model="categoryStore.c3Id">
          <el-option
            v-for="item in categoryStore.c3Arr"
            :key="item.id"
            :value="item.id"
            :label="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<style scoped></style>
